<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .ui-datatable .ui-datatable-header {
                text-align:right;
            }

            .actions td {
                border: 0px none !important;
                padding: 2px !important;
            }
        </style>

        <script type="text/javascript">
            function onEditComplete(xhr, status, args) {
                if(args.validationFailed) {
					$(PrimeFaces.escapeClientId('form:carDlg')).parent().effect("shake", { times:5 }, 100);
				} else {
					carDialog.hide();
				}
            }
        </script>
    </ui:define>

    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">DataTable - Row Selection</h1>
        <div class="entry">
            <p>This examples demonstrates how to select a row using a PrimeFaces commandButton.</p>

            <h:form id="form">

                <p:growl id="msgs" showDetail="true" />

                <p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">

                    <p:column headerText="Model">
                        <h:outputText value="#{car.model}" />
                    </p:column>

                    <p:column headerText="Year">
                        <h:outputText value="#{car.year}" />
                    </p:column>

                    <p:column headerText="Manufacturer">
                        <h:outputText value="#{car.manufacturer}" />
                    </p:column>

                    <p:column headerText="Color">
                        <h:outputText value="#{car.color}" />
                    </p:column>

                    <p:column style="width:100px">
                         <h:panelGrid columns="3" styleClass="actions" cellpadding="2">
                             <p:commandButton update=":form:display" oncomplete="carDialog.show()" image="ui-icon ui-icon-search" title="View">
                                 <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                                 <f:setPropertyActionListener value="#{false}" target="#{tableBean.editMode}" />
                             </p:commandButton>
                             <p:commandButton update=":form:display" oncomplete="carDialog.show()" image="ui-icon ui-icon-pencil" title="Edit">
                                 <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                                 <f:setPropertyActionListener value="#{true}" target="#{tableBean.editMode}" />
                             </p:commandButton>
                             <p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete">
                                 <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                             </p:commandButton>
                         </h:panelGrid>
                    </p:column>

                </p:dataTable>

                <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"
                            showEffect="fade" hideEffect="explode" modal="true">

                    <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">

                        <f:facet name="header">
                            <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                        </f:facet>
                        
                        <h:outputText value="Model:" />
                        <h:panelGroup>
                            <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold" rendered="#{!tableBean.editMode}"/>
                            <p:inputText value="#{tableBean.selectedCar.model}" rendered="#{tableBean.editMode}" required="true" label="Model"/>
                        </h:panelGroup>

                        <h:outputText value="Year:" />
                        <h:panelGroup>
                            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold" rendered="#{!tableBean.editMode}"/>
                            <p:inputText value="#{tableBean.selectedCar.year}" rendered="#{tableBean.editMode}" required="true" label="Year"/>
                        </h:panelGroup>

                        <h:outputText value="Manufacturer:" />
                        <h:panelGroup>
                            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold" rendered="#{!tableBean.editMode}"/>
                            <h:selectOneMenu value="#{tableBean.selectedCar.manufacturer}" rendered="#{tableBean.editMode}">
                                <f:selectItems value="#{tableBean.manufacturers}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                            </h:selectOneMenu>
                        </h:panelGroup>

                        <h:outputText value="Color:" />
                        <h:panelGroup>
                            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold" rendered="#{!tableBean.editMode}"/>
                            <h:selectOneMenu value="#{tableBean.selectedCar.color}" rendered="#{tableBean.editMode}">
                                <f:selectItems value="#{tableBean.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                            </h:selectOneMenu>
                        </h:panelGroup>

                        <f:facet name="footer">
                            <p:outputPanel rendered="#{tableBean.editMode}" layout="block" style="text-align:right">
                                <p:commandButton value="Save" update="cars msgs" actionListener="#{tableBean.save}" oncomplete="onEditComplete(xhr,status,args)"
                                                 image="ui-icon ui-icon-check"/>
                                <p:commandButton value="Cancel" onclick="carDialog.hide()" type="button" image="ui-icon ui-icon-close"/>
                                
                            </p:outputPanel>
                        </f:facet>
                    </h:panelGrid>

                </p:dialog>

                <p:confirmDialog message="Are you sure?" width="200"
								showEffect="explode" hideEffect="explode"
								header="Confirm" severity="alert" widgetVar="confirmation">

                    <p:commandButton value="Yes sure" update="cars" actionListener="#{tableBean.delete}" oncomplete="confirmation.hide()"/>
                    <p:commandButton value="Not yet" onclick="confirmation.hide()" type="button" />

                </p:confirmDialog>

            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="datatableRowSelection.xhtml">
                    <pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;p:growl id="msgs" showDetail="true" /&gt;

    &lt;p:dataTable id="cars" var="car" value="\#{tableBean.carsSmall}"&gt;

        &lt;p:column headerText="Model"&gt;
            &lt;h:outputText value="\#{car.model}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column headerText="Year"&gt;
            &lt;h:outputText value="\#{car.year}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column headerText="Manufacturer"&gt;
            &lt;h:outputText value="\#{car.manufacturer}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column headerText="Color"&gt;
            &lt;h:outputText value="\#{car.color}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column style="width:100px"&gt;
             &lt;h:panelGrid columns="3" styleClass="actions" cellpadding="2"&gt;
                 &lt;p:commandButton update=":form:display" oncomplete="carDialog.show()" image="ui-icon ui-icon-search" title="View"&gt;
                     &lt;f:setPropertyActionListener value="\#{car}" target="\#{tableBean.selectedCar}" /&gt;
                     &lt;f:setPropertyActionListener value="\#{false}" target="\#{tableBean.editMode}" /&gt;
                 &lt;/p:commandButton&gt;
                 &lt;p:commandButton update=":form:display" oncomplete="carDialog.show()" image="ui-icon ui-icon-pencil" title="Edit"&gt;
                     &lt;f:setPropertyActionListener value="\#{car}" target="\#{tableBean.selectedCar}" /&gt;
                     &lt;f:setPropertyActionListener value="\#{true}" target="\#{tableBean.editMode}" /&gt;
                 &lt;/p:commandButton&gt;
                 &lt;p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete"&gt;
                     &lt;f:setPropertyActionListener value="\#{car}" target="\#{tableBean.selectedCar}" /&gt;
                 &lt;/p:commandButton&gt;
             &lt;/h:panelGrid&gt;
        &lt;/p:column&gt;

    &lt;/p:dataTable&gt;

    &lt;p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"
                showEffect="fade" hideEffect="explode" modal="true"&gt;

        &lt;h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;"&gt;

            &lt;f:facet name="header"&gt;
                &lt;p:graphicImage value="/images/cars/\#{tableBean.selectedCar.manufacturer}.jpg"/&gt;
            &lt;/f:facet&gt;

            &lt;h:outputText value="Model:" /&gt;
            &lt;h:panelGroup&gt;
                &lt;h:outputText value="\#{tableBean.selectedCar.model}" style="font-weight:bold" rendered="\#{!tableBean.editMode}"/&gt;
                &lt;p:inputText value="\#{tableBean.selectedCar.model}" rendered="\#{tableBean.editMode}" required="true" label="Model"/&gt;
            &lt;/h:panelGroup&gt;

            &lt;h:outputText value="Year:" /&gt;
            &lt;h:panelGroup&gt;
                &lt;h:outputText value="\#{tableBean.selectedCar.year}" style="font-weight:bold" rendered="\#{!tableBean.editMode}"/&gt;
                &lt;p:inputText value="\#{tableBean.selectedCar.year}" rendered="\#{tableBean.editMode}" required="true" label="Year"/&gt;
            &lt;/h:panelGroup&gt;

            &lt;h:outputText value="Manufacturer:" /&gt;
            &lt;h:panelGroup&gt;
                &lt;h:outputText value="\#{tableBean.selectedCar.manufacturer}" style="font-weight:bold" rendered="\#{!tableBean.editMode}"/&gt;
                &lt;h:selectOneMenu value="\#{tableBean.selectedCar.manufacturer}" rendered="\#{tableBean.editMode}"&gt;
                    &lt;f:selectItems value="\#{tableBean.manufacturers}" var="man" itemLabel="\#{man}" itemValue="\#{man}" /&gt;
                &lt;/h:selectOneMenu&gt;
            &lt;/h:panelGroup&gt;

            &lt;h:outputText value="Color:" /&gt;
            &lt;h:panelGroup&gt;
                &lt;h:outputText value="\#{tableBean.selectedCar.color}" style="font-weight:bold" rendered="\#{!tableBean.editMode}"/&gt;
                &lt;h:selectOneMenu value="\#{tableBean.selectedCar.color}" rendered="\#{tableBean.editMode}"&gt;
                    &lt;f:selectItems value="\#{tableBean.colors}" var="color" itemLabel="\#{color}" itemValue="\#{color}" /&gt;
                &lt;/h:selectOneMenu&gt;
            &lt;/h:panelGroup&gt;

            &lt;f:facet name="footer"&gt;
                &lt;p:outputPanel rendered="\#{tableBean.editMode}" layout="block" style="text-align:right"&gt;
                    &lt;p:commandButton value="Save" update="cars msgs" actionListener="\#{tableBean.save}" 
                                    oncomplete="onEditComplete(xhr,status,args)" image="ui-icon ui-icon-check"/&gt;
                    &lt;p:commandButton value="Cancel" onclick="carDialog.hide()" type="button" image="ui-icon ui-icon-close"/&gt;

                &lt;/p:outputPanel&gt;
            &lt;/f:facet&gt;
        &lt;/h:panelGrid&gt;

    &lt;/p:dialog&gt;

    &lt;p:confirmDialog message="Are you sure?" width="200"
                    showEffect="explode" hideEffect="explode"
                    header="Confirm" severity="alert" widgetVar="confirmation"&gt;

        &lt;p:commandButton value="Yes sure" update="cars" actionListener="\#{tableBean.delete}" oncomplete="confirmation.hide()"/&gt;
        &lt;p:commandButton value="Not yet" onclick="confirmation.hide()" type="button" /&gt;

    &lt;/p:confirmDialog&gt;

    &lt;/h:form&gt;
                    </pre>
                </p:tab>

                <p:tab title="TableBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

import org.primefaces.examples.domain.Car;

public class TableBean {

    static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";

		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

    private final static String[] colors;

	private final static String[] manufacturers;

	private List&lt;Car&gt; cars;

	private Car selectedCar;

    private boolean editMode;

	public TableBean() {
        cars = new ArrayList&lt;Car&gt;();

		populateRandomCars(cars, 50);
	}

    private void populateRandomCars(List&lt;Car&gt; list, int size) {
		for(int i = 0 ; i &lt; size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}

	public Car getSelectedCar() {
		return selectedCar;
	}
	public void setSelectedCar(Car selectedCar) {
		this.selectedCar = selectedCar;
	}

	public List&lt;Car&gt; getCars() {
		return cars;
	}

    private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}

	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}

	private String getRandomManufacturer() {
		return manufacturers[(int) (Math.random() * 10)];
	}

	private String getRandomModel() {
		return UUID.randomUUID().toString().substring(0, 8);
	}

    public void delete() {
        carsSmall.remove(selectedCar);
    }

    public boolean isEditMode() {
        return editMode;
    }

    public void setEditMode(boolean editMode) {
        this.editMode = editMode;
    }
}
                    </pre>
                </p:tab>
            </p:tabView>

        </div>

    </ui:define>
</ui:composition>
